<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>MyFeed - Walkthrough</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/rss_info.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="css/IE6fix/common_ie6fix.css" type="text/css" />
<![endif]--> 
<script src="../js/common.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
    <h1 id="logo"><span>MyFeed (beta) - Walkthrough</span></h1>
</div>

<div class="access_help">
    <a href="#tab_wrapper" accesskey="c" class="access_help">Jump to content in this page</a> | 
  <a href="#nav_list" accesskey="n">Jump to navigation menu in this page</a>
</div>

<div id="alt">
      <ul>
        <li><a href="../mobiles/help.html">Mobiles</a></li>
        <li><a href="javascript:Common.toggleCSS();">Text Only</a></li>
        <li><a href="access_help.html">Accessibility Help</a></li>
      </ul>
    </div>

<div id="navbar">
	<form action="../cgi-bin/login.pl" method="post">
	    <fieldset><legend>Login</legend>
	    	<ul>
				<li><label>username</label><input accesskey="u" class="username" name="username" type="text" /></li>
				<li><label>password</label><input accesskey="p" class="password" name="password" type="password"/></li>
				<li><input class="submit" type="submit" value="login"/></li>
	    	</ul>
	    </fieldset>
     </form>
   
	<ul id="nav_list">
	    <li><a href="../index.html" accesskey="o">H<span class="underlined">o</span>me</a></li>
	    <li><a href="../xml/signup.xml" accesskey="s"><span class="underlined">S</span>ign Up</a></li>
	    <li class="here">Help</li>    
	    <li><a href="../about.html" accesskey="a"><span class="underlined">A</span>bout</a></li>
	    <li><a href="../sitemap.html"  accesskey="m">Site<span class="underlined">m</span>ap</a></li>
	</ul>
</div>	

<div id="tab_wrapper">
    <p class="site_pos">You are here:  <a href="../index.html">Home</a> -&gt; <a href="help.html">Help</a> -&gt; Walkthrough</p>
    <h1><a name="top">Walkthrough</a></h1>
    <p>MyFeed is more than a website and some of its parts may be difficult to understand at the first look. In this section, we'll take a tour of some of its most complicated issues.</p>
    <h2>Summary</h2>
    <ol id="summary">
	<li><a href="#arg_whats">Why a walkthrough?</a></li>
	<li><a href="#arg_browse">Browse Feeds</a>
	    <ol>
		<li><a href="#arg_feeds">Your Feeds</a></li>
		<li><a href="#arg_items">Feed Items</a></li>
		<li><a href="#arg_itemContent">Feed Item Content</a></li>
	    </ol>
	</li>
	<li><a href="#arg_add">Add a Feed</a></li>
	<li><a href="#arg_delete">Delete a Feed</a></li>
	<li><a href="#arg_manage">Manage Feeds</a>
	    <ol>
			<li><a href="#create">Create a group</a></li>
			<li><a href="#change">Change group Name</a></li>
			<li><a href="#delete">Delete a group</a></li>
			<li><a href="#organize">Organize your feeds</a></li>   
	    </ol>
	</li>
	
    </ol>

    <h2 id="arg_help">Content</h2>
    <ol id="content">
		<li><h3 id="arg_whats">Why a walkthrough?</h3>
	  		
			<p>In many pages in the website there are question marks that helps you on the road. If javascript is enabled, you should see a little tooltip that explains what's the meaning of that section. If javascript is not enabled, you could click on those question marks and you will be redirected to the correspondent part in this walkthrough.</p>	    
			<p class="top_link"><a href="#top">Top</a></p>
		</li>
		<li><h3 id="arg_browse">Browsing your feed</h3>
			<ol>
				<li><h4 id="arg_feeds">Your Feeds</h4>
					<img src="../images/walk/feeds.jpg" alt="An example of the list of the feeds." />
					<ol>
						<li>Cliking on the lens (javascript feature) shows the Filter, which you can use to search between your feeds. A new temporary feed group will appear with the pattern you used as title.</li>
						<li>The feeds are organized in groups, so you can find out faster what you are looking for. Clicking on a group (javascript feature) you can toggle his feeds. Clicking again makes them reappear.</li>
						<li>When you start browsing a feed and while you are browsing its items and its contents, the background of the name beacome green. When you leave it, it becomes light red until you refresh the page.</li>
					</ol>
					<p class="top_link"><a href="#top">Top</a></p>
				</li>
				<li><h4 id="arg_items">Feed Items</h4>
					<img src="../images/walk/main_app_items.jpg" alt="An example of the list of the items of a feed"  />
					<ol>
						<li>Cliking on the lens (javascript feature) shows the Filter, which you can use to search between feed items. You you insert a void pattern, the filter will show all the items again</li>
						<li>When browsing an item, its background becomes green. When you leave it for another, it suddenly becomes red and remains so until the refresh of the page.</li>
					</ol>
					<p class="top_link"><a href="#top">Top</a></p>				
				</li>
				<li><h4 id="arg_itemContent">Feed Item Content</h4>
					<img src="../images/walk/main_app_desc.jpg" alt="An example of the content of a feed item"/>
					<ol>
						<li>The title of the Feed.</li>
						<li>The title of the feed item. Under the title you have the publication date and a link to the original post. On the right, you have some small icons that make easy to share the post on your favourite social networks.</li>
						<li>The content on the feed. It may not be complete, for an explanation visit our <a href="app_help.html#arg_navigateFeeds">navigation section at application help</a></li>
					</ol>				
				</li>
			</ol>
			<p class="top_link"><a href="#top">Top</a></p>
		</li>
		<li><h3 id="arg_add">Add a Feed</h3>
			<img src="../images/walk/add_feed_base.jpg" alt="The part of the subcribe page with the form to put the URL to be checked"  />
					<ol>
						<li>Put here an address. You have two options: you can try putting directly the address of a web page to see if it embeds RSS feeds (the methond to see if a page embeds RSS items is explained in RSS Help at section <a href="rss_info.html#arg_where_to_find">"Where to find RSS?"</a>) or previously get to that RSS page you want to subscribe to and then copy here its address.</li>
						<li>Click on the CheckRSS. If an error message something went (terribly!) wrong and you have to retry with another web address. The message will anyway explain what's the problem.</li>
						
					</ol>			
			<img src="../images/walk/add_feed_plus.jpg"  alt="The part of the subcribe page after teh checking of the URL" />
					<ol>
						<li>The title of the page you are trying to subscribe to and its available feeds.</li>
						<li>Put here the name you want to recognize your feed with while browsing</li>
						<li>Select in which group you want to put your feed.</li>
						<li>The options you have are to abort your subscription if you discover that this is not what you want or to finish the subscription process.</li>
					</ol>	
			<p class="top_link"><a href="#top">Top</a></p>	
		</li>
		<li><h3 id="arg_delete">Delete a Feed</h3>
			<img src="../images/walk/delete.jpg"  alt="The part of the 'delete feed' page with the table" />
			<ol>
						<li>Select all the feeds you want to delete</li>
						<li>Click the "Delete Selected" or reset the table by clicking "Reset" button.</li>
					</ol>	
			<p class="top_link"><a href="#top">Top</a></p>
		</li>
		<li><h3 id="arg_manage">Manage Feeds</h3>
			<ol>
				<li><h4 id="create">Create a group</h4>
					<img src="../images/walk/manage_create.jpg"  alt="The part of the manage page dedicated to create groups" />
					<ol>
						<li>Put the name of the group you want to create</li>
						<li>Click the button to execute the task.</li>
						
					</ol>
					<p class="top_link"><a href="#top">Top</a></p>								
				</li>
				<li><h4 id="change">Change group Name</h4>
					<img src="../images/walk/manage_change.jpg"  alt="The part of the manage page dedicated to change groups name" />
					<ol>
						<li>Select which group you want to change the name of</li>
						<li>Put a new name for the group</li>
						<li>Click the button to execute the task.</li>
					</ol>				
				<p class="top_link"><a href="#top">Top</a></p>
				</li>
				<li><h4 id="delete">Delete a group</h4>
					<img src="../images/walk/manage_delete.jpg" alt="The part of the manage page dedicated to delete groups" />
					<ol>
						<li>Select which group you want to delete. It must be empty or the operation will fail.</li>
						<li>Click the button to execute the task.</li>
						
					</ol>
				<p class="top_link"><a href="#top">Top</a></p>
				</li>
				<li><h4 id="organize">Organize your feeds</h4>
					<img src="../images/walk/manage_move.jpg"  alt="The part of the manage page dedicated to move feeds between groups"/>
					<ol>
						<li>On the first column of the table you have the list of your feeds grouped as you wished.</li>
						<li>On the second column, every feed has on the correspondent row a selection of group where you can move that feed to (obviously without the group they belong to). Select one amongst them.</li>
						<li>Choose if completing the task or resetting the table values</li>
					</ol>
				<p class="top_link"><a href="#top">Top</a></p>
				</li>			</ol>
		</li>
	
    </ol>
</div>

<!-- FOOTER -->
<div id="footer">
		<div class="footer_el" id="certs">
			<h5>HEY, WE'RE VALID!</h5>
				<ul>
					<li><a href="http://validator.w3.org/check?uri=referer">
						<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
						</a>
					</li>
					<li><a href="http://jigsaw.w3.org/css-validator/check/referer">
						<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valido!" />
						</a>
					</li>
					<li>
						<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance">
	  					<img height="32" width="88" src="http://www.w3.org/WAI/wcag1AAA-blue" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" />
						</a>
					</li>
				</ul>
		</div>
		<div class="footer_el" id="brought">
			<h5>BROUGHT TO YOU BY</h5>
				<ul>
					<li><address>Lorenzo Tessari<br/>
							Fake Str. 435<br/>
							Memphis, Tenessee<br/>
							01 555 23 322 33<br/>
						</address>
					</li>
					<li><address>Oscar Chinellato <br/>
							Fake Str. 1436<br/>
							L.A, California<br/>
							01 555 23 322 35<br/>
						</address>
					</li>
				</ul>
		</div>
		<div class="footer_el" id="contacts">
			<h5>CONTACTS</h5>
				<p>Did you find something wrong?<br/> Do you want something better?<br/> Do you have any idea?<br/> Are you a beautiful girl who likes Quake 3 Arena?</p>
				<p><a href="mailto:team@myfeed.com">Contact Us</a></p>		
		</div>
	</div>
<!-- END FOOTER -->
<!-- ACCESSIBILITY HELP -->
<div class="access_help">
  <a href="#header" accesskey="n">Jump to top of the page</a> 
</div>
<!-- END ACCESSIBILITY HELP -->
</body>
</html>
